<template>
<view class="page">
	<view class="top">
		<view class="top_item" :class="active==item.id?'active':''" @click="changeType(item.id)" v-for="item in type" :key='item.id'>{{item.name}}</view>
	</view>
	<view class="zhan"></view>
	<view class="item" v-for="(item,index) in list" :key='item.id' >
		<view class="i_t" @click="toD(item)">{{item.name}}</view>
		<view class="i_flex">
			<view class="time" @click="toD(item)">关注时间：{{item.createtime}}</view>
			<view class="btn" @click="qxgz(item,index)">取消关注</view>
		</view>
	</view>
	<view class="isfinsh" v-if="isfinsh&&list.length>0">没有更多了~</view>
	<view class="none_img"  v-if="list.length==0">
		<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/zwsj.png" mode="widthFix"></image>
		<view class="">暂无</view>
	</view>
</view>
</template>

<script>
	import {gz,myIndustrychain} from '../../utils/api.js'
	export default {
		data() {
			return {
				active:2,
				type:[
					{name:'项目',id:2},
					{name:'企业',id:5},
					{name:'园区',id:6},
					{name:'政策',id:7},
					{name:'区县',id:1},
				],
				list:[],
				page:1,
				isfinsh:false
			}
		},
		onLoad(){
			this.getList()
		},
		methods: {
			init(){
				this.page=1
				this.isfinsh=false
				this.getList()
			},
			changeType(id){
				this.active = id
				this.init()
			},
			getList(){
				if(this.isfinsh){
					return
				}
				gz.getList({type:this.active,page:this.page}).then(res=>{
					if(this.page == 1){
						this.list = res.data.data
					}else{
						this.list.push(...res.data.data)
					}
					if(this.list.length>=res.data.total){
						this.isfinsh = true
					}
				})
			},
			qxgz(item,index){
				let that = this
				uni.showModal({	
					title:'提示',
					content:'确定取消关注吗?',
				  success: function (res) {
						if (res.confirm) {
							gz.AttendAddOrCancel({name:item.name,identification:item.identification,type:that.active}).then(res=>{
								if(res.status==1){
									that.list.splice(index,1)
								}
							})
						} 
					}
				})
			},
			toD(item){
				let id = this.active
				let page=''
				page = id==1?'cityDetail':id==2?'proDetail':id==3?'xuqiu':id==4?'chainDetail':id==5?'companyDetail':id==6?'parkDetail':id==7?'pDetail':id==8?'huiyiDetail':'newsDetail'
				let url = id==5 ? `/pages/${page}/${page}?identification=${item.identification}`:`/pages/${page}/${page}?id=${item.identification}` 
				if(id==4){
					myIndustrychain({chain_id:item.identification}).then(res=>{
						let data = {
							id:item.identification,
							chain_name:item.name,
							children:res.data	
						}
						uni.navigateTo({
							url:"/subPage/pages/chainDetail/chainDetail?chain="+ JSON.stringify(data) 
						})
					})
					return
				}
				uni.navigateTo({
					url
				})
			}
		},
		onReachBottom(){
			if(this.isfinsh){
				return
			}
			this.page += 1
			this.getList()
		},
	}
</script>

<style scoped lang="scss">
.i_flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	color: #666;
	.time{
		font-size: 14px;
		color:#ccc
	}
	.btn{
		height: 26px;
		border-radius: 13px;
		line-height: 26px;
		width: 80px;
		text-align: center;
		border:1px solid #C0C0C0;
		font-size: 14px;
	}
}
.page{
	width: 100%;
	// background-color: #F2F2F2;
}
.top{
	position: fixed;
	top: 0;
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	background-color: #fff;
	z-index: 10;
	.top_item{
		width: 80px;
		padding: 10px 0;
		text-align: center;
		display: inline-block;
	}
	.active{
		color: #f93;
		font-size: 18px;
	}
}
.zhan{
	height: 50px;
	width: 100%;
}
.item{
	width: calc(94% - 24px);
	margin: 0 auto 10px;
	background-color: #fff;
	border-radius: 8px;
	padding: 12px;
	box-shadow: 0 2px 4px 0 #00000022;
	.i_t{
		width: 80%;
		// font-weight: 880;
		position: relative;
		&::after{
			content: ' ';
			position: absolute;
			right: -60px;
			top: 6px;
			width: 10px;
			height: 10px;
			border-top: 1px solid #ccc;
			border-right: 1px solid #ccc;
			transform: rotate(45deg);
		}
	}
}
.none_img{
		width: 100%;
		text-align: center;
		image{
			margin-top: 60px;
			width: 50%;
		}
		view{
			font-size: 22px;
			font-weight: 800;
			color: #ccc;
		}
	}
	.isfinsh{
		text-align: center;
		color: #999;
		width: 100%;
		margin: 20px 0;
		background: #fff;
		padding-bottom: 40px;
	}
</style>
